<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>套利查询</span>
      </div>
      <cTableDisplayWithPagination
        :data="agencyDetail"
        :col-configs="colConfigs"
      />
    </el-card>
    <el-card class="box-card" v-loading="loading" :style="{marginTop:'20px'}">
      
        <div slot="header" class="clearfix">

          <!--<el-button  @click="switch_repeat_ip(1005)" :type="filters.event == 1005 ?'primary' : ''">重叠登录IP</el-button>-->
          <!-- <el-button  @click="switch_repeat_ip(1004)" :type="filters.event == 1004 ?'primary' : ''">重叠注册IP</el-button> -->

        </div>

        <el-form class="search-repeat-ip">
            <el-form-item
                label="账号"
                prop=""
            >
            <el-input type="" placeholder="请输入账号" v-model="filters.searchName" max-length="20" @keyup.enter.native="submitFilterForm"></el-input>

            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
            </el-form-item>
        </el-form>

      <cTableDisplayWithPagination
        :data="tableData.list"
        :col-configs="colConfigs2"
      />
      <div class="pagination-container">
        <el-pagination
          bordered
          layout="total, sizes, prev, next"
          :disabled="loading"
          @size-change="cursorGridSizeChange"
          @prev-click="cursorPrevClickChange"
          @next-click="cursorNextClickChange"
          :page-size="filters.size"
          :page-sizes="gridPageSize"
          :total="tableData.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {
    riskIpOverlayListApi as listApi,
  } from '@/services/api/risk';
  import cTableDisplayWithPagination from '@/components/cTableDisplayWithPagination'
  import {grid} from '@/build'

  const timeFilter = {
    props: ['colConfig'],
    template: `
    <el-table-column v-bind="colConfig">
      <span slot-scope="{row}">
        {{row[colConfig.prop] | toTime}}
      </span>
    </el-table-column>
  `
  }
  const userTypeFilter = {
    props: ['colConfig'],
    template: `
    <el-table-column v-bind="colConfig">
      <span slot-scope="{row}">
        {{row[colConfig.prop] | toConverter('ACCOUNT_TYPE')}}
      </span>
    </el-table-column>
  `
  }


  export default {
    name: "user-arbitrage",
    components: {
      cTableDisplayWithPagination
    },
    mixins: [grid],
    data() {
      return {
        agencyDetail: [],
        tableData: [],
        // colConfigs: [
        //   {prop: 'userType', label: '账号类型', component: userTypeFilter},
        //   {prop: 'username', label: '账号'},
        //   {prop: 'reallyName', label: '姓名'},
        //   {prop: 'birthday', label: '出生日期'},
        //   {prop: 'deviceId', label: 'UUID（设备号编号）', width: '200px'},
        //   {prop: 'telephone', label: '手机号码 '},
        //   {prop: 'addressMobile', label: '⼿机号归属地'},
        //   {prop: 'registerIp', label: '注册IP',},
        //   {prop: 'registerDate', label: '注册时间', component: timeFilter},
        //   {prop: 'loginIp', label: '最后登录IP'},
        //   {prop: 'loginTime', label: '最后登录时间', component: timeFilter},
        // ],
        colConfigs: [
          {prop: 'userType', label: '账号类型', component: userTypeFilter},
          {prop: 'username', label: '账号'},
          {prop: 'reallyName', label: '姓名'},
          {prop: 'birthday', label: '出生日期'},
          {prop: 'deviceId', label: 'UUID（设备号编号）', width: '200px'},
          {prop: 'telephone', label: '手机号'},
          {prop: 'addressMobile', label: '手机号码归属地'},
          {prop: 'registerIp', label: '注册IP',},
          {prop: 'registerIpAddress', label: '注册IP归属地',},
          {prop: 'registerDate', label: '注册时间', component: timeFilter},
          {prop: 'loginIp', label: '最后登录IP'},
          {prop: 'loginIpAddress', label: '最后登录IP归属地',},
          {prop: 'loginTime', label: '最后登录时间', component: timeFilter},
        ],
        // 重叠登录IP配置
        colConfigs2 :[
          {prop: 'userName', label: '账号'},
          {prop: 'reallyName', label: '姓名'},
          // -- 新增-- begin 设备号，手机号，邮箱，注册ip
          {prop: 'deviceId', label : '设备号'},
          {prop: 'telephone', label : '手机号'},
          {prop: 'place', label : '手机号码归属地'},
          {prop: 'email', label : '邮箱'},
          {prop: 'regIP', label : '注册IP'},
          {prop: 'regGeo', label : '注册IP归属地'},
          {prop: 'ip', label: '重叠登录IP'},
          {prop: 'ipGeo', label: '重叠登录IP归属地'  },
          {prop: 'loginTime', label: '登录时间', component: timeFilter},
        ],
        filters: {
          size: 10,
          event : 1005,
          searchName: ''
        },
      }
    },
    methods: {
        // 根据账号和姓名搜索ip
        submitFilterForm(){
            this.doGet({
                action: 'getGrid',
                sendingData: 'filters'
            })
        },

        // 切换重叠ip
        switch_repeat_ip(index){
            this.filters.event = index;
            this.filters = {...this.filters};
            this.doGet({
                action: 'getGrid',
            })
            
        },

        // 获取重叠ip
        getRepeatIpData(){
          this.agencyDetail = [this.$store.state.member.member_info];
          this.filters.userName = this.agencyDetail[0].username
          this.filters.userType = this.agencyDetail[0].userType
          this.bindGet(listApi, 'tableData', {
              action: 'getGrid',
              sendingData: 'filters',
              format : (data)=>{
                  return this.handel_data(data);
              }
          });
        },
        handel_data(data){
            if(!(data.list instanceof Array)){
                return;
            }
            const result = data.list.map((ele)=>{
                let reg_str = '', login_str = '', ip_str = '';
                reg_str += ele.regGeo.country + ele.regGeo.region + ele.regGeo.city;
                login_str += ele.loginGeo.country + ele.loginGeo.region + ele.loginGeo.city;
                ip_str += ele.ipGeo.country + ele.ipGeo.region + ele.ipGeo.city;
                ele.regGeo = reg_str;
                ele.loginGeo = login_str;
                ele.ipGeo = ip_str;
                return ele;
            });
            data.list = result;
            return data;
        }
    },

    mounted() {
      this.getRepeatIpData();
      this.getAll();
    }
  }
</script>

<style lang="scss" scoped>
.el-card-header {
    padding-bottom: 20px;
    .total-wrap {
        padding: 5px;
        line-height: 2;
        strong {
            display: inline-block;
            text-align: right;
            width: 100px;
            font-size: 14px;
        }

        .total-item {
            font-size: 14px;
            padding: 0 5px;
            display: inline-block;
            min-width: 120px;
        }
        >div{
            .el-button.active{
                color: #fff;
                background-color: #409eff;
                border-color: #409eff;
            }
        }
    }
}
.search-repeat-ip{
    display: flex;
    align-items: center;
    >div{
        display: flex;
        heighet : 100%;
        margin-right: 20px;
    }
}
</style>
